webix
		.ready(function() {
			var my_template = {
				template : "<span style='font-size:20px; font-weight:bold; color:#3498DB'; >成员管理</span>&nbsp;/&nbsp;&nbsp; MemberManagement",
				height : 45,	
				borderless : true
			};
			var my_table = {
				view : "datatable",
				id : "mydatatable",
				columns : [
						
						{
							id : "userName",
							header : "用户名",/*
											 * [{ content:"textFilter",
											 * placeholder:"请输入成员id进行查询",}],
											 */
							fillspace : true,
							sort : "string"
						},
						{
							id : "realName",
							header : "姓名",/*
											 * [{ content:"textFilter",
											 * placeholder:"请输入成员姓名进行查询",}],
											 */
							fillspace : true
						},
						{
							id : "email",
							header : "电子邮箱",/*
											 * [{ content:"textFilter",
											 * placeholder:"请输入所属部门进行查询",}],
											 */
							fillspace : true
						},
						{
							id : "sex",
							header : "性别",
							fillspace : true,
							template : function(obj, type) {
								if (obj.sex == 0) {
									return "男";
								}
								if (obj.sex == 1) {
									return "女";
								}
							}
						},
						{
							id : "phone",
							header : "联系方式",
							fillspace : true
						},
						{
							id : "address",
							header : "地址",
							fillspace : true
						},
						{
							id : "status",
							header : "用户状态",
							fillspace : true,
							template : function(obj, type) {
								if (obj.status == 1) {
									return "启用";
								}else{
									return "不启用";
								}
							}
						},
						{
							id : "edit",
							header : "操作",
							width : 120,
 							template : "<div><a href='#' onclick=\"edit('#id#');\">编辑</a>&nbsp;&nbsp;<a href='#' onclick=\"del('#id#');\">删除</a></div>"
 						}, ],
				height : 600,
				select : true,
			// url:"http://192.168.1.111:9001/Application/demo"
			};
			var page = {
				view : "pager",
				id : "pagerA",
				// 新用户刚开始没有产生数据出现分页标签
				// count:1000,
				// master:false,
				// group:15,
				// size:5,
				// page:1,
				template : "{common.first()}{common.prev()}{common.pages()}{common.next()}{common.last()}",
				css : "pager",
				on : {
					onItemClick : function(id, e, node) {
						if (id == "next") {
							if ($$("pagerA").config.limit == $$("pagerA").config.page + 1) {
								id = $$("pagerA").config.limit - 1;
							} else {
								id = $$("pagerA").config.page + 1;
							}
						} else if (id == "prev") {
							id = $$("pagerA").config.page - 1;
						} else if (id == "first") {
							id = 0;
						} else if (id == "last") {
							id = $$("pagerA").config.limit - 1;
						}
						var params = {};
						params.currPage = parseInt(id) + 1;
						params.pageSize = 10;
						postData("ajaxGetUserList", params, callback);
					}
				},
				height : 38,
				css : {
					"text-align" : "center",
					"margin-top" : "20px!important"
				}
			};
			var params = {};
			params.pageSize = 10;
			postData("ajaxGetUserList", params, callback);
			var my_toolbar = {
				view : "toolbar",
				id : "mytoolbar",
				elements : [{
					view : "text",
					id : "s2",
					label : "用户名/姓名/邮件/手机号:",
					width : 400,
					labelWidth:200
				},
				{
					view : "button",
					value : "查询",
					width : 50,
					click : "select",
					css : "btn_check"
				}, {
					view : "button",
					value : "添加成员",
					width : 100,
					click : "addRow",
					css : "btn_check"
				}, ]
			};
			var web = {
				container : "body",
				type : "line",
				id : "mylayout",
				rows : [ my_template, my_toolbar, my_table, page ],
			};
			webix.ui(web);// ---webix.ui结束----
			// 添加成员模态框实现
			var basicForm1 = [ {
				cols : [ {
					view : "text",
					id : "userName",
					name : "userName",
					width : 250,
					label : "登录账号：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*6-20位字符(支持数字/字母)",
					css : "tishi",
					width:220
				}, {
					view : "text",
					id : "realName",
					name : "realName",
					width : 250,
					label : "成员姓名：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*不支持特殊字符",
					css : "tishi",
					width:220

				}, ]
			}, {
				cols : [ {
					view : "text",
					id : "password",
					name : "password",
					width : 250,
					label : "密码：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*6-20位字符(区分大小写)",
					css : "tishi",
					width:220
						
				}, {
					view : "text",
					id : "phone",
					name : "phone",
					width : 250,
					label : "手机号码：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*请使用中国手机号",
					css : "tishi"
				}, ]
			}, {
				cols : [ {
					view : "text",
					id : "email",
					name : "email",
					width : 250,
					label : "电子邮箱：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*请填写常用的邮箱",
					css : "tishi",
					width:220
 				},
				{
					view : "text",
					id : "address",
					name : "address",
					width : 250,
					label : "地址：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*请填写家庭住址",
					css : "tishi"
				}, ]
			}, {
				margin : 100,
				cols : [ {
					view : "radio",
					name : "sex",
					id : "sex",
					label : "性别：",
					labelWidth : 100,
					width : 300,
					value:0,
					options : [ {id:0,value:"男"},{id:1,value:"女"} ]
				}, {
					view : "checkbox",
					name : "status",
					id : "status",
					value : 1,
					label : "用户状态：",
					labelWidth : 100,
					labelRight : "启用",
					width : 300
				}, ]
			}, ];
			var show_date = webix.Date.dateToStr("%Y-%m-%d");
			var Mytabview = {
				view : "tabview",
				cells : [ {
					header : "基础信息",
					body : {
						view : "form",
						id : "basicForm",
						width : 900,
						height : 360,
						elements : basicForm1
					}

				}, {
					header : "角色信息",
					body : {
						rows : [ {
							view : "datatable",
							id : "roleTable",
							width : 900,
							height : 322,
							editable : true,
							select : true,
							css : {
								"margin-left" : "10px!important"
							},
							columns : [ {
								id : "pick",
								header : "选择",
								template : "{common.checkbox()}",
								checkValue : "1",
								width : 60
							}, {
								id : "id",
								header : "id",
								hidden : true
							}, {
								id : "roleName",
								header : "角色名称",
								fillspace : true
							}, {
								id : "startDate",
								header : "有效时间",
								editor : "date",
								stringResult : true,
								format : show_date,
								fillspace : true
							}, {
								id : "endDate",
								header : "失效时间",
								editor : "date",
								stringResult : true,
								format : show_date,
								fillspace : true
							}, ],
						} ]
					}
				} ]
			};
			//修改框
			var basicForm2 = [ {
				cols : [ {
					view : "text",
					id : "user_id",
					name : "user_id",
					hidden:true
					}, {
					view : "text",
					id : "userName2",
					name : "userName2",
					width : 250,
					label : "登录账号：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*6-20位字符(支持数字/字母)",
					css : "tishi"
				}, {
					view : "text",
					id : "realName2",
					name : "realName2",
					width : 250,
					label : "成员姓名：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*不支持特殊字符",
					css : "tishi"
				}, ]
			}, {
				cols : [ {
					view : "text",
					id : "password2",
					name : "password2",
					width : 250,
					label : "密码：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*6-20位字符(区分大小写)",
					css : "tishi"
				}, {
					view : "text",
					id : "phone2",
					name : "phone2",
					width : 250,
					label : "手机号码：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*请使用中国大陆手机号",
					css : "tishi"
				}, ]
			}, {
				cols : [ {
					view : "text",
					id : "email2",
					name : "email2",
					width : 250,
					label : "电子邮箱：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*请填写常用的邮箱",
					css : "tishi"
				},
				{
					view : "text",
					id : "address2",
					name : "address2",
					width : 250,
					label : "地址：",
					labelWidth : 100
				}, {
					view : "label",
					label : "*请填写家庭住址",
					css : "tishi"
				}, ]
			}, {
				margin : 100,
				cols : [ {
					view : "radio",
					name : "sex2",
					id : "sex2",
					label : "性别：",
					value :0,
					labelWidth : 100,
					width : 300,
					options : [ {id:0,value:"男"},{id:1,value:"女"} ]
				}, {
					view : "checkbox",
					name : "status2",
					id : "status2",
					value : 1,
					label : "用户状态：",
					labelWidth : 100,
					labelRight : "启用",
					width : 300
				}, ]
			}, ];
			var show_date = webix.Date.dateToStr("%Y-%m-%d");
			var Mytabview2 = {
				view : "tabview",
				cells : [ {
					header : "基础信息",
					body : {
						view : "form",
						id : "basicForm2",
						width : 900,
						height : 360,
						elements : basicForm2
					}

				}, {
					header : "角色信息",
					body : {
						rows : [ {
							view : "datatable",
							id : "roleTable2",
							width : 900,
							height : 322,
							editable : true,
							select : true,
							css : {
								"margin-left" : "10px!important"
							},
							columns : [ {
								id : "pick",
								header : "选择",
								template : "{common.checkbox()}",
								checkValue : "1",
								width : 60
							}, {
								id : "id",
								header : "id",
								hidden : true
							}, {
								id : "roleName",
								header : "角色名称",
								fillspace : true
							}, {
								id : "startDate",
								header : "有效时间",
								editor : "date",
								stringResult : true,
								format : show_date,
								fillspace : true
							}, {
								id : "endDate",
								header : "失效时间",
								editor : "date",
								stringResult : true,
								format : show_date,
								fillspace : true
							}, ],
						} ]
					}
				} ]
			};
			
			webix.ui({
				view : "window",
				id : "win3",
				borderless : true,
				type : "clean",
				position : "center",
				// css:{"width":"60%","height":"70%"},
				width : 900,
				height : 500,
				modal : true,
				move : true,
				head : false,
				body : {
					rows : [ Mytabview, {
						cols : [ {
							view : "button",
							id : "save",
							value : "保存",
							click : "save()",
							width : 80,
							css : {
								"margin-left" : "720px!important"
							}
						}, {
							view : "button",
							id : "cancel",
							value : "取消",
							click : "$$('win3').hide()",
							width : 80,
							css : {
								"margin-left" : "10px!important"
							}
						}, ]
					} ]
				}
			});
			webix.ui({
				view : "window",
				id : "win4",
				borderless : true,
				type : "clean",
				position : "center",
				// css:{"width":"60%","height":"70%"},
				width : 900,
				height : 500,
				modal : true,
				move : true,
				head : false,
				body : {
					rows : [ Mytabview2, {
						cols : [ {
							view : "button",
							id : "edit",
							value : "修改",
							click : "saveExit()",
							width : 80,
							css : {
								"margin-left" : "720px!important"
							}
						}, {
							view : "button",
							id : "cancel2",
							value : "取消",
							click : "$$('win4').hide()",
							width : 80,
							css : {
								"margin-left" : "10px!important"
							}
						}, ]
					} ]
				}
			});
			
			// //获取所属平台和客户名称并且赋值
			// $$("platC").setValue("sadasds");
			// $$("platN").setValue("aaaaa");
			// 实现删除

			$$("s1").attachEvent("onTimedKeyPress", function() {
				var value = this.getValue();
				var name2 = $$("s2").getValue();
				if (value == "" && name2 == "") {
					location.reload();
				}
			});
			$$("s2").attachEvent("onTimedKeyPress", function() {
				var value = this.getValue();
				var name2 = $$("s1").getValue();
				if (value == "" && name2 == "") {
					location.reload();
				}
			});
			$$("roleTable").attachEvent(
					"onAfterEditStop",
					function(state, editor, ignoreUpdate) {
						var item = $$("roleTable").getSelectedItem();
						console.log(item);
						if (item.startDate > item.endDate && item.startDate
								&& item.endDate) {
							alert("有效时间不能大于失效时间！");
							item[editor.column] = "";
							// $$("roleTable").updateItem(editor.row,
							// editor.column);
						}
					});
			$$("roleTable2").attachEvent(
					"onAfterEditStop",
					function(state, editor, ignoreUpdate) {
						var item = $$("roleTable2").getSelectedItem();
						if (item.startDate > item.endDate && item.startDate
								&& item.endDate) {
							alert("有效时间不能大于失效时间！");
							item[editor.column] = "";
							// $$("roleTable").updateItem(editor.row,
							// editor.column);
						}
					});
		})

function addRow() {
	var roles_data = JSON.parse($("#roles").val());
	$$("basicForm").clear();
	$$("status").setValue(1);
	$$("sex2").setValue(0);
	// $$("memberNo").enable();
	$$("password").enable();
	// 得到角色表格
	// 测试数据
	$$('roleTable').clearAll();
	$$('roleTable').define("data", roles_data);
	$$("roleTable").refresh();
	$$("win3").show();
};
// 查询实现
function select() {
	var params = {};
	var pici1 = $$("s2").getValue();
	params["condition"] = pici1;
	postData("ajaxGetUserList", params, callback);
}
var editBoo = false;
function saveExit(){
	var params = {};
	var formValues = {};
	var tableValues = [];
	var flag = false;
	var loginNoReg = /^\w{6,20}$/;
	var Mname = /^[^*$#@]+$/;
	var phone = /^(13[0-9]|15[0|3|6|7|8|9]|18[8|9])\d{8}$/;
	var email = /^([0-9a-z_\.-]+)@([0-9a-z\.-]+)\.([a-z]{2,6})$/;
	$$("roleTable2").editStop();
	// 表单数据
	formValues = $$("basicForm2").getValues();
	console.log(formValues);
	params = formValues;
	// 遍历每一行，得到表格数据
	$$("roleTable2").eachRow(
			function(row) {
				if ($$("roleTable2").getItem(row).pick == 1
						&& $$("roleTable2").getItem(row).startDate != ""
						&& $$("roleTable2").getItem(row).endDate != "") {
					tableValues.push($$("roleTable2").getItem(row));
					flag = true;
				}
			});
	params.roles =arrayToJson(tableValues);
	if (formValues.realName2 == "") {
		alert("请填写成员姓名...");
		return false;
	}
	if (!(Mname.test($.trim(formValues.realName2)))) {
		alert("成员姓名不能包含特殊字符");
		return false;
	}
	if (formValues.phone2 == "") {
		alert("请填写手机号码...");
		return false;
	}
	if (!(phone.test($.trim(formValues.phone2)))) {
		alert("请填写手机号码的正确格式");
		return false;
	}
	if (formValues.email2 == "") {
		alert("请填写电子邮箱...");
		return false;
	}
	if (!(email.test($.trim(formValues.email2)))) {
		alert("请填写电子邮箱正确格式...");
		return false;
	}
	if (formValues.address2 == "") {
		alert("请填写地址...");
		return false;
	}
	if (!flag) {
		alert("请给成员添加角色并填写时间..");
		return false;
	} else { 
	  params.user_id = $$("user_id").getValue();
	  if(!editBoo){
		  editBoo = true;
		  webix.ajax().sync().post("editUserInfo", params, function(text,xml, xhr) {
		  var data  =JSON.parse(text);
		  if(data.ret==1){
			  alert("操作成功");
			  location.reload();
		  }else{
			  alert("操作失败,错误信息为:"+data.msg);
		  }
		  editBoo = false;
	  });
	
}
}
}
var addBoo = false;
function save() {
	var params = {};
	var formValues = {};
	var tableValues = [];
	var flag = false;
	var loginNoReg = /^\w{6,20}$/;
	var Mname = /^[^*$#@]+$/;
	var phone = /^(13[0-9]|14[157]|15[0-65-9]|17[0-9]|18[0-9])\d{8}$/;
	var email = /^([0-9a-z_\.-]+)@([0-9a-z\.-]+)\.([a-z]{2,6})$/;
	$$("roleTable").editStop();
	// 表单数据
	formValues = $$("basicForm").getValues();
	console.log(formValues);
	params = formValues;
	// 遍历每一行，得到表格数据
	$$("roleTable").eachRow(
			function(row) {
				if ($$("roleTable").getItem(row).pick == 1
						&& $$("roleTable").getItem(row).startDate != ""
						&& $$("roleTable").getItem(row).endDate != "") {
					tableValues.push($$("roleTable").getItem(row));
					flag = true;
				}
			});
	params.roles =arrayToJson(tableValues);
	if (formValues.userName == "") {
		alert("请填写登录账号...");
		return false;
	}
	if (checkUserName(formValues.userName)==true) {
		alert("该登陆账号已存在...");
		return false;
	}
	if (!(loginNoReg.test($.trim(formValues.userName)))) {
		alert("请填写登录账号的正确格式");
		return false;
	}
	if (formValues.realName == "") {
		alert("请填写成员姓名...");
		return false;
	}
	if (!(Mname.test($.trim(formValues.realName)))) {
		alert("成员姓名不能包含特殊字符");
		return false;
	}
	if (formValues.password == "") {
		alert("请填写密码...");
		return false;
	}
	if (!(loginNoReg.test($.trim(formValues.password)))) {
		alert("请填写密码的正确格式");
		return false;
	}
	if (formValues.phone == "") {
		alert("请填写手机号码...");
		return false;
	}
	if (!(phone.test($.trim(formValues.phone)))) {
		alert("请填写手机号码的正确格式");
		return false;
	}
	if (formValues.email == "") {
		alert("请填写电子邮箱...");
		return false;
	}
	if (!(email.test($.trim(formValues.email)))) {
		alert("请填写电子邮箱正确格式...");
		return false;
	}
	if (formValues.address == "") {
		alert("请填写地址...");
		return false;
	}
	if (formValues.sex<0) {
		alert("请选择性别...");
		return false;
	}
	if (!flag) {
		alert("请给成员添加角色并填写时间..");
		return false;
	} else {
			if(!addBoo){
				addBoo = true;
			  webix.ajax().sync().post("submitUser", params, function(text,xml, xhr) {
				  var data  =JSON.parse(text);
				  if(data.ret==1){
					  alert("操作成功");
					  location.reload();
				  }else{
					  alert("操作失败,错误信息为:"+data.msg);
				  }
				  addBoo = false;
			  });
			}
	}
		// $$('win3').hide();
		// $$("roleTable").clearAll();
		// $$("basicForm").clear();
	}
function checkUserName(userName){
	var flag = true; 
	var params = {};
	params.userName= userName;
	webix.ajax().sync().post("checkUserNameIsExist", params, function(text,xml, xhr) {
		var data = JSON.parse(text);
		flag=data.data;
	  });
	return flag;
}


function callback(data) {
	var text1 = JSON.parse(data);
	// var data = new webix.DataCollection({data:text1.page});
	// $$('mydatatable').data.sync(data);
	$$("mydatatable").clearAll();
	$$("mydatatable").define("data", text1.data.page);
	$$('mydatatable').refresh();
	$$("pagerA").define("limit", text1.data.totalPageCount);
	$$("pagerA").define("count", text1.data.totalCount);
	$$("pagerA").define("size", text1.data.pageSize);
	$$("pagerA").define("page", text1.data.currPage - 1);
	$$('pagerA').refresh();
}
function callback1(data) {
	// 从后台获取数据，得到所有成员表格数据
	var text1 = JSON.parse(data);
	$$('mydatatable').clearAll();
	$$('mydatatable').define("data", text1.page);
	$$("mydatatable").refresh();
	$$("pagerA").define("limit", text1.totalPageCount);
	$$("pagerA").define("count", text1.totalCount);
	$$("pagerA").define("size", text1.pageSize);
	$$("pagerA").define("page", text1.currPage - 1);
	$$('pagerA').refresh();
}
function callback2(data) {
	// 从后台获取数据，得到所有角色名称
	var text1 = JSON.parse(data);
	$$('roleTable').clearAll();
	$$('roleTable').define("data", text1.page);
	$$("roleTable").refresh();
}
function del(memberNo) {
	
	webix.confirm({
		title : "提示",
		text : "确定要删除吗?",
		ok : "确定",
		cancel : "取消",
		callback : function(result) {
			if (result == true) {
				webix.ajax().post("deleteUser", "user_id=" + memberNo,
						function(text, xml, xhr) {
							alert("执行完毕");
							location.reload();
						});
			}
		}

	});
}

function edit(memberNo) {
	$$("win4").show();
	var params = {};
	params.user_id = memberNo;
	// 得到对应成员的角色表格
	webix.ajax().sync().post("ajaxGetUserById", params, function(text,xml, xhr) {
		var data = JSON.parse(text);
		$$('roleTable2').clearAll();
		$$('roleTable2').define("data", data.data.role_data);
		$$("roleTable2").refresh();
		// 根据成员号从后台获取成员信息
		// webix.ajax().sync().post("T1", "operater_id="+memberNo, function(text,
		// xml, xhr) {
		// var memberData=text.data;
		// });
		// 测试数据
		$$('basicForm2').setValues({
			user_id:memberNo,
			userName2 : data.userName,
			realName2 : data.realName,
			email2 : data.email,
			address2 : data.address,
			sex2 : data.sex,
			phone2 : data.phone,
			password2 : data.passWord,
			status2 : data.status
		});
		$$("password2").disable();
		$$("userName2").disable();

	  });
}
